<?
$this->includeHeader();
$Areas		= &$this->GetPageElement('AREAS');
$Cities		= &$this->GetPageElement('CITIES');
$Weathers	= &$this->GetPageElement('WEATHERS');
$Dates		= &$this->GetPageElement('DATES');
?>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
	<td width="190" valign="top" id="left_block">
		<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#e6f0f6" class="black12">
		<tr>
			<td width="7" height="7"><img src="/system/templates/default/images/w5_1.png" width="7" height="7"></td>
			<td></td>
			<td width="7"><img src="/system/templates/default/images/w5_2.png" width="7" height="7"></td>
		</tr>
		<tr>
			<td></td>
			<td valign="top">
			ЛЕВЫЙ БЛОК
			</td>
			<td></td>
		</tr>
		<tr>
			<td height="7"><img src="/system/templates/default/images/w5_3.png" width="7" height="7"></td>
			<td></td>
			<td><img src="/system/templates/default/images/w5_4.png" width="7" height="7"></td>
		</tr>
		</table>
	</td>
	<td valign="top" style="padding-left:15px">
		<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#e6f0f6" class="black12">
		<tr bgcolor="#FFFF88">
			<td width="7" valign="top" bgcolor="#f9cf58"><img src="/system/templates/default/images/w5_1.png" width="7" height="7"></td>
			<td height="25" colspan="3" bgcolor="#f9cf58"><h1>Погода в Беларуси - [<a id="map_show" href="#">Карта</a>]</h1></td>
			<td width="7" valign="top" bgcolor="#f9cf58"><img src="/system/templates/default/images/w5_2.png" width="7" height="7"></td>
		</tr>
		<tr><td height="1" colspan="5" background="/system/templates/default/images/line_2.gif"></td></tr>
		<tr>
			<td height="25"></td>
			<td colspan="3" style="padding-top:7px">
				<div id="info">
					<p>Текст на главную.</p>
					<p>Список городов.</p>
					<table width="100%" cellpadding="0" cellspacing="0" class="black12">
					<tr>
						<td valign="top"><p><strong>Областные города:</strong></p>
							<ul>
								<?if (!is_null($Cities)) {
									foreach ($Cities as $City) {
										echo '<li><a href="',$City['URL'],'">',$City['NAME'],'</a></li>';
									}
								}?>
							</ul>
						</td>
						<td width="11" valign="top" background="/system/templates/default/images/line_vert_blue_1.gif"><img src="/system/templates/default/images/line_vert_blue_1.gif" width="11" height="6"></td>
						<?if (!is_null($Areas)) {
							foreach ($Areas as $Index => $Area) {
								echo '<td valign="top">
									<p><a href="',$Area['URL'],'"><strong>',$Area['NAME'],':</strong></a></p>
									<ul>';
								foreach ($Area['CITIES'] as $City) {
									echo '<li><a href="',$City['URL'],'">',$City['NAME'],'</a></li>';
								}
								echo '<li><a href="',$Area['URL'],'">Другие...</a></li>
									</ul>
								</td>';
								if ($Index != 5) {echo '<td width="11" valign="top" background="/system/templates/default/images/line_vert_blue_1.gif"><img src="/system/templates/default/images/line_vert_blue_1.gif" width="11" height="6"></td>';}
							}
						}?>
					</tr>
					</table>
				</div>
				<div id="map">
					<div id="slider">
						<div id="slide_dates">
							<?$months = array('01' => 'января', '02' => 'февраля', '03' => 'марта', '04' => 'апреля', '05' => 'мая', '06' => 'июня', '07' => 'июля', '08' => 'авгутса', '09' => 'сентября', '10' => 'октября', '11' => 'ноября', '12' => 'ноября');
								$week		= array('вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб');
								$D = new DateTime();
							foreach ($Dates as $Date) {
								preg_match('#([0-9]+)-([0-9]+)-([0-9]+)#', $Date['DATE'], $match);
								$D->setDate($match[1], $match[2], $match[3]);
								echo '<span class="date">', $match[3], ' ',$months[$match[2]],', ',$week[$D->format('w')], '</span>';
							}
							?>
						</div>
						<div id="slide_line">
							<div id="sdiler_cursor"></div>
							<div id="slider_scale"></div>
						</div>
						<div style="cleat:both"></div>
						<div id="slide_time">
							<?$TimesArray = array('ночь', 'утро', 'день', 'вечер');
							for ($i = 0; $i < 5; ++$i) {
								foreach ($TimesArray as $Index => $Time) {
									echo '<span class="time">',$Time,'</span>';
								}
							}
							?>
						</div>
					</div>
					<table height="100%" cellpadding="0" cellspacing="0" class="black12" align="center">
					<tr align="left">
						<td><span class="WeatherImg" style="background-position: 0 -360px"></span><span class="WeatherImg" style="background-position: 0 -750px"></span></td>
						<td>Ясно, без осадков</td>
						<td><span class="WeatherImg" style="background-position: 0 -330px"></span><span class="WeatherImg" style="background-position: 0 -720px"></span></td>
						<td>Облачно, без осадков</td>
						<td><span class="WeatherImg" style="background-position: 0 -300px"></span></td>
						<td>Пасмурно, без осадков</td>
					</tr>
					<tr align="left">
						<td><span class="WeatherImg" style="background-position: 0 0"></span><span class="WeatherImg" style="background-position: 0 -390px"></span></td>
						<td>Дождь</td>
						<td><span class="WeatherImg" style="background-position: 0 -210px"></span></span></td>
						<td>Сильный дождь</td>
						<td><span class="WeatherImg" style="background-position: 0 -240px"></span><span class="WeatherImg" style="background-position: 0 -600px"></span></td>
						<td>Преимущественно без осадков</td>
					</tr>
					<tr align="left">
						<td><span class="WeatherImg" style="background-position: 0 -180px"></span><span class="WeatherImg" style="background-position: 0 -570px"></span></td>
						<td colspan="5">Дождь, гроза</td>
					</tr>
					</table>
					<div id="rb_map">
						<div id="map_layers">
							<?$Coords = array(
									174 => array(635, 40),
									1450 => array(135, 630),
									3531 => array(560, 690),
									5007 => array(380, 55),
									7068 => array(360, 400),
									9057 => array(340, 650),
									1231 => array(80, 350),
									2629 => array(160, 320),
									1354 => array(60, 430),
									2705 => array(40, 510),
									1967 => array(240, 680),
									2377 => array(250, 625),
									2953 => array(270, 575),
									2841 => array(210, 600),
									2161 => array(170, 670),
									1714 => array(100, 580),
									2510 => array(110, 480),
									2254 => array(110, 380),
									3185 => array(140, 380),
									1612 => array(175, 405),
									1873 => array(205, 410),
									3035 => array(145, 485),
									2070 => array(180, 495),
									3263 => array(150, 555),
									1139 => array(180, 568),
									3126 => array(220, 520),
									7239 => array(203, 328),
									6304=> array(240, 346),
									7152=> array(281, 318),
									6440=> array(317, 305),
									6892=> array(304, 402),
									6180=> array(277, 461),
									6772=> array(257, 509),
									7604=> array(332, 438),
									6084=> array(309, 506),
									7939=> array(371, 483),
									6539=> array(378, 335),
									7791=> array(412, 312),
									7852=> array(403, 390),
									7407=> array(426, 432),
									7327=> array(454, 302),
									6679=> array(459, 371),
									7541=> array(491, 383),
									7719=> array(488, 445),
									6607=> array(501, 303),
									7672=> array(525, 383),
									6357=> array(551, 422),
									5671=> array(200, 246),
									5979=> array(228, 265),
									5754=> array(263, 236),
									4915=> array(332, 166),
									5244=> array(355, 228),
									5329=> array(393, 231),
									5567=> array(409, 178),
									5418=> array(368, 161),
									6080=> array(400, 116),
									5114=> array(441, 164),
									5501=> array(433, 101),
									4801=> array(446, 53),
									4846=> array(470, 75),
									5815=> array(505, 70),
									5171=> array(468, 163),
									5878=> array(498, 156),
									3=> array(465, 236),
									750=> array(496, 226),
									553=> array(573, 35),
									351=> array(604, 70),
									631=> array(631, 119),
									809=> array(678, 57),
									1035=> array(551, 100),
									117=> array(575, 153),
									485=> array(542, 200),
									241=> array(541, 300),
									291=> array(616, 174),
									399=> array(638, 224),
									919=> array(620, 280),
									698=> array(588, 313),
									1122=> array(664, 331),
									4059=> array(687, 408),
									3681=> array(700, 490),
									4234=> array(710, 567),
									3271=> array(713, 648),
									3737=> array(598, 403),
									4349=> array(656, 445),
									4179=> array(656, 528),
									4722=> array(681, 573),
									4111=> array(677, 654),
									3901=> array(622, 567),
									4448=> array(600, 631),
									3618=> array(587, 726),
									4281=> array(564, 491),
									4651=> array(555, 580),
									3450=> array(553, 757),
									3796=> array(520, 594),
									3357=> array(524, 669),
									4796=> array(504, 700),
									4564=> array(470, 620),
									3982=> array(477, 707),
									8238=> array(519, 489),
									9289=> array(455, 475),
									8023=> array(481, 536),
									8626=> array(403, 543),
									8440=> array(448, 557),
									8105=> array(414, 619),
									9378=> array(410, 678),
									9634=> array(394, 731),
									8804=> array(440, 710),
									8720=> array(425, 771),
									9442=> array(407, 819),
									8510=> array(378, 797),
									7948=> array(343, 570),
									8927=> array(302, 578),
									9750=> array(306, 651),
									8785=> array(281, 706),
									8378=> array(307, 718),
									9191=> array(335, 754),
									9571=> array(368, 666),
									8880=> array(363, 730)
							);
							foreach ($Coords as $Index => $Coord) {
								echo '<div id="city_',$Index,'" class="cityLayer" style="margin-top:',$Coord[0],'px;margin-left:', $Coord[1], 'px">
									<span class="WeatherImg" style="background-position:0 0"></span>
									<div>
										<span class="WeatherT">',$Weathers[$Index]['NIGHT_T'][0], 'C</span><br />
										<span class="CityName">',$Weathers[$Index]['NAME'], '</span>
									</div>
								</div>';
							}
							?>
						</div>
					</div>
					<table height="100%" cellpadding="0" cellspacing="0" class="black12" align="center">
					<tr align="left">
						<td><span class="WeatherImg" style="background-position: 0 -360px"></span><span class="WeatherImg" style="background-position: 0 -750px"></span></td>
						<td>Ясно, без осадков</td>
						<td><span class="WeatherImg" style="background-position: 0 -330px"></span><span class="WeatherImg" style="background-position: 0 -720px"></span></td>
						<td>Облачно, без осадков</td>
						<td><span class="WeatherImg" style="background-position: 0 -300px"></span></td>
						<td>Пасмурно, без осадков</td>
					</tr>
					<tr align="left">
						<td><span class="WeatherImg" style="background-position: 0 0"></span><span class="WeatherImg" style="background-position: 0 -390px"></span></td>
						<td>Дождь</td>
						<td><span class="WeatherImg" style="background-position: 0 -210px"></span></td>
						<td>Сильный дождь</td>
						<td><span class="WeatherImg" style="background-position: 0 -240px"></span><span class="WeatherImg" style="background-position: 0 -600px"></span></td>
						<td>Преимущественно без осадков</td>
					</tr>
					<tr align="left">
						<td><span class="WeatherImg" style="background-position: 0 -180px"></span><span class="WeatherImg" style="background-position: 0 -570px"></span></td>
						<td colspan="5">Дождь, гроза</td>
					</tr>
					</table>
				</div>
			</td>
			<td></td>
		</tr>
		<tr>
			<td height="7"><img src="/system/templates/default/images/w5_3.png" width="7" height="7"></td>
			<td></td>
			<td></td>
			<td></td>
			<td><img src="/system/templates/default/images/w5_4.png" width="7" height="7"></td>
		</tr>
		</table>
	</td>
</tr>
</table>
<script>
	$(document).ready(function() {
		<?
			echo 'var wDates = ['; getDates($Dates); echo '];';
			echo 'var wCities = {'; getCities($Weathers); echo '};';
		?>
		var sDate = 0;
		var sTime = 'NIGHT';
		<? echo 'var wTimes = {'; getTimes($Dates); echo '};';?>
		var img_day = {120:"360",220:"300",320:"330",420:"330",110:"0",111:"180",130:"210",131:"180",140:"240",141:"180"};
		var img_night = {120:"750",220:"300",320:"720",420:"720",110:"390",111:"570",130:"600",131:"570",140:"630",141:"570"};
		// ---
		var cursorMove = false;
		var MinMax = null;
		function getMinMax() {
			var e = $("#slide_line")[0];
			var gMin = 0;
			while (e.offsetParent){
        gMin += e.offsetLeft
        e    = e.offsetParent
			}
			gMin += e.offsetLeft
			return {min:gMin, max:gMin+790}
		}
		$("#sdiler_cursor").mousedown(function(e) {
			MinMax = getMinMax();
			cursorMove = true;
			document.ondragstart = function() { return false }
      document.body.onselectstart = function() { return false }
			$(document).mousemove(function(e) {return move(e)});
			$(document).mouseup(function() {
				cursorMove = false;
				$(document).mousemove(null);
				document.ondragstart = null;
				document.body.onselectstart = null;
				$(document).mouseup(null);
			});
			return false;
		});
		var inUpdate		= false;
		var waitUpdate		= false;
		function move(e) {
			if (cursorMove) {
				var pos = e.pageX;
				if (pos < MinMax.min) {pos = MinMax.min;}
				else if (pos > MinMax.max) {pos = MinMax.max;}
				$("#sdiler_cursor").css({left: pos+"px"});
				pos = pos - MinMax.min;
				var oTime = sTime;
				var oDate = sDate;
				for (key in wTimes) {
					if (pos == key) {
						sTime = wTimes[key].time;
						sDate = wTimes[key].date;
						break;
					} else if (pos > key) {
						sTime = wTimes[key].time;
						sDate = wTimes[key].date;
						var i = key + 1;
						if (wTimes[i]) {if (pos < i) {break;}}
					}
				}
				if (oDate == sDate && oTime == sTime) {return true;}
				if (inUpdate) {waitUpdate = true;return true;}
				setTimeout(function() {
					waitUpdate		= false;
					return render();
				}, 100);
			}
			return false;
		}
	//$("#sdiler_cursor").draggable();
		function render() {
			inUpdate		= true;
			for (key in wCities) {
				var img, k;
				if (wCities[key][sTime+"_RAIN"][sDate] == 2 && wCities[key][sTime+"_PHEN"][sDate] == 0) {k = wCities[key][sTime+"_CLOUDY"][sDate]+"20";}
				else {k = "1"+wCities[key][sTime+"_RAIN"][sDate]+wCities[key][sTime+"_PHEN"][sDate];}
				if (sTime == "NIGHT") {img = img_night[k];}
				else {img = img_day[k];}
				var Element = $("#city_"+key)[0];
				Element.children[0].style.cssText = "background-position:0 -"+img+"px";
				Element.children[1].children[0].innerHTML = wCities[key][sTime+"_T"][sDate]+"C";
			}
			inUpdate = false;
			if (waitUpdate) {waitUpdate = false;render();}
		}
		render();
	});
</script>
<script>
	$(document).ready(function() {
		var b = 1;
		$("#map_show").click(function() {
			$("#map").toggle();
			$("#info").toggle();
			$("#left_block").toggle();
			if (b == 1) {$(this).html("Вернуться");b = 2;}
			else {$(this).html("Карта");b = 1;}
			return false;
		});
	});
</script>
<?
	function getDates(&$Dates) {
		$sep = '';
		foreach ($Dates as $Date) {
			echo $sep,'"',$Date['DATE'],'"';
			$sep = ',';
		}
	}
	function getCities(&$Weathers) {
		$sep = '';
		foreach ($Weathers as $ID => $City) {
			echo $sep, $ID, ': {';
			$s = '';
			foreach ($City as $Index => $Value) {
				if ($Index != 'NAME' && $Index != 'CITY_TYPE' && $Index != 'AREAD_ID') {echo $s, $Index,': [', implode(',', $Value), ']';}
				else {echo $s, $Index,': "', $Value, '"';}
				$s = ',';
			}
			echo '}';
			$sep = ',';
		}
	}
	function getTimes(&$Dates) {
		$i = 0;$sep = '';
		$TimesArray = array('NIGHT', 'MORNING', 'DAY', 'EVENING');
		foreach ($Dates as $Index => $Date) {
			foreach ($TimesArray as $Time) {
				echo $sep, $i, ': {date:"', $Index, '", time:"', $Time, '"}';
				$sep = ',';
				$i += 40;
			}
		}
	}
	$this->includeFooter();
?>
